<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    <%--系统角色资源 --%>
    <title>${title}</title>
	
	<link rel="stylesheet" type="text/css" href="<c:url value='/resource/css/common.css'/>"/>
	<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<c:url value='/resource/js/common.js'/>"></script>
	<style type="text/css">
		#content{width:590px;display:block;height:330px;margin:10px 0 0 10px;}
		.div_title{width:250px;height:30px;line-height:30px;text-align:center;font-weight:bold;}
		#selectLeft,#selectRight{width:248px;height:300px;}
		#appLeft,#appRight{float:left;width:250px;}
		#middle_div{width:35px;height:180px;margin:0px;padding:0px;float:left;margin:78px 10px 0px 10px;text-align:center;}
		#middle_div p{width:35px;height:30px;line-height:30px; cursor:pointer;}
		#middle_div p:hover{width:35px;height:30px;cursor:pointer;background-color:#ccc;}
	</style>
	<script type="text/javascript">
		//保持左侧初始化信息
		var resource_left = new Array();
		$(function(){
			$("#selectLeft option").each(function(){
				resource_left.push($(this).val());
			})
			//左侧项双击 
			$("#selectLeft").dblclick(function(){
				var _curr=$(this).find("option:selected");
				if(_curr.size()>0){
					if(!isExists("#selectRight",_curr.val())){
						if($.inArray(_curr.val(),resource_left)>=0){
							$("#selectRight").append("<option value='"+_curr.val()+"'>"+_curr.text()+"</option>");
						}else{
							$("#selectRight").append("<option style='color:green' value='"+_curr.val()+"'>"+_curr.text()+"</option>");
						}
					}
				}
				_curr.remove();
			});
			//右侧双击
			$("#selectRight").dblclick(function(){
				var _curr=$(this).find("option:selected");
				if(_curr.size()>0){
					if($(_curr).val()){
						if($.inArray(_curr.val(),resource_left)>=0){
							$("#selectLeft").append("<option value='"+_curr.val()+"'>"+_curr.text()+"</option>");
						}else{
							$("#selectLeft").append("<option style='color:green' value='"+_curr.val()+"'>"+_curr.text()+"</option>");
						}
						_curr.remove();
					}
				}
			});
			//移除已有资源
			$("#addRight").hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");}).click(function(){
				var _sel = $("#selectLeft").find("option:selected");
				$("#selectLeft").find("option:selected").each(function(index,obj){
					if(!isExists("#selectRight",$(obj).val())){
						if($.inArray($(obj).val(),resource_left)>=0){
							$("#selectRight").append("<option value=\""+$(obj).val()+"\">"+$(obj).text()+"</option>");
						}else{
							$("#selectRight").append("<option style='color:green' value=\""+$(obj).val()+"\">"+$(obj).text()+"</option>");
						}
					}
					$(obj).remove();
				});
			});
			
			$("#addRights").hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");}).click(function(){
				$("#selectLeft option").each(function(){
					$(this).attr('selected',true);
				});
				$("#addRight").click();
			});
			
			
			
			//向角色中添加资源
			$("#addLeft").hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");}).click(function(){
				//var _sel = $("#selectRight").find("option:selected");
				$("#selectRight").find("option:selected").each(function(index,obj){
					if($(obj).val()){
						if($.inArray($(obj).val(),resource_left)>=0){
							$("#selectLeft").append("<option value=\""+$(obj).val()+"\">"+$(obj).text()+"</option>");
						}else{
							$("#selectLeft").append("<option style='color:green' value=\""+$(obj).val()+"\">"+$(obj).text()+"</option>");
						}
						$(obj).remove();
					}
				});
			});
			
			
			$("#addLefts").hover(function(){$(this).css("backgroundColor","#ccc");},function(){$(this).css("backgroundColor","white");}).click(function(){
				$("#selectRight option").each(function(){
					$(this).attr('selected',true);
				});
				$("#addLeft").click();
			});
			
			
			
			
			
			//将右侧待选的移除(增加左右互斥功能)
			$("#selectLeft option").each(function(){
				var v = $(this).val();
				//alert(v)
				$("#selectRight option").each(function(){
					//_res.push($(this).val());
					var m = $(this).val();
					if(v==m)
					{
						$(this).remove();
					}
				});
			});
		});
		
		/**判断多选框中是否存在已经选中项*/
		function isExists(cmpId,_id){
			var _flag = false;
			$(cmpId).find("option").each(function(index,obj){
				if($(this).val() == _id){
					_flag = true;
					return false;
				}
			});
			return _flag;
		}
		//保存角色资源关联数据
		function saveRoleResource(roleId){
			var _res = new Array();
			$("#selectLeft option").each(function(){
				_res.push($(this).val());
			});
			$.ajax({
				url:"<c:url value='/sys/role/resource/create.json'/>",
				data:{"resId":_res.join(),"roleId":roleId},
				success:function(data){
					parent.showMessage(data.msg.body);
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				},
				error:function(){
					parent.showMessage(data.msg.body);
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				},
				dataType:"json",
				type:"post"
			});
		}
	</script>
</head>
<body>
	<div id="content">
		<div id="appLeft">
			<div class="div_title">已有资源列表</div>
			<select id="selectLeft" multiple="multiple" size="50">
  				<c:forEach items="${roleresource}" var="data" varStatus="status">
  				<option value="${data.resid}">${data.name}</option>
  				</c:forEach>
			</select>
			<input type="hidden" id="sel_roles" name="roles"/>
		</div>
		<div id="middle_div">
			<p id="addLeft" title="添加选中资源至左侧角色中"><</p>
			<p id="addLefts" title="添加全部资源至左侧角色中"><<</p>
			<p id="addRight" title="从左侧角色中移除选中资源">></p>
			<p id="addRights" title="从左侧角色中移除全部资源">>></p>
		</div>
		<div id="appRight">
			<div class="div_title" style="color:green">待选资源列表</div>
			<select id="selectRight" multiple="multiple" size="50">
  				<c:forEach items="${allresource}" var="data" varStatus="status">
  					<option style="color:green" value="${data.resid}">${data.name}</option>
  				</c:forEach>
			</select>
		</div>
	</div>
  </body>
</html>
